<template>
    <div class="list-page-design">
        <div class="main-design">
            <div class="nums_text" >
                <div class="class-choose">
                    <el-radio-group v-model="select" size="small" @change="changeType">
                        <el-radio name="全部" label="全部" border/>
                        <el-radio v-for="item in menuList"
                                  :key="item.name"
                                  :label="item.name" border></el-radio>
                    </el-radio-group>
                </div>
                <div class="search-box-design" style=" ">
                    <el-input
                            placeholder="请输入内容"
                            v-model="input3"
                            clearable
                            class="input-with-select"
                            @keyup.enter="submitFn"
                    >
                        <template #append>
                            <el-button type="primary" @click="submitFn"><el-icon style="vertical-align: middle;padding-right: 10px;" >
                            <Search />
                            </el-icon> 搜 索</el-button>
                        </template>
                    </el-input>
                </div>
            </div>
            <div class="design-main">
                <div v-for="(item, key) in listObjData" :key="item" style="text-align: left">
                    <span class="design-divider" v-if="select === '全部'"> {{ key }}</span>
                    <div class="design-list-box">
                        <span class="item" v-for="(img, index) in item" :key="img">
                            <el-image style="width: 99%; height: 200px" :src="'/svg/design/' + img.relative_path" :title="img.file_name" fit="scale-down" @click="viewImg(img, key, index)"></el-image>
                            <span class="view-text">浏览&nbsp&nbsp{{ img.view_count }}</span>
                            <span style="display: block">
                                <span class="title-left">{{ img.file_name }}</span>
                            <span class="title-right" @click="download(img, key, index)"><i class="download-icon" />
                                <span class="download-text">下载<span class="inner-text">{{ img.download_count }}</span>
                                </span>
                            </span>
                            </span>
                        </span>
                    </div>
                </div>
            </div>
        </div>
        <div class="svg-collect-design">
            <div class="text">
                <span style="font-size: 12px">总下载量：{{ totalDownload }}&nbsp&nbsp&nbsp&nbsp总浏览量：{{ totalView }}</span>
            </div>
        </div>

        <!--查看大图-->
        <el-dialog v-model="visible" :show-close="true" :width="dialogWidth + 'px'" :height="dialogHeight + 'px'">
            <img :key="imgKey" :src="'/svg/design/' + imgToDownload.relative_path" @load="onLoad" :width="dialogWidth" :height="dialogHeight" />
            <template #footer>
                <el-button type="primary" @click="downloadInDialog" icon="download-white" size="small">下载</el-button>
                <span class="download-dialog-right">{{ imgToDownload.download_count }}</span>
            </template>
        </el-dialog>

    </div>
</template>

<script>
    import { searchDesign, typeListDesign, recordDesign, getDownloadCountDesign } from "../api/nav"; //引入进来
    import JSZip from "jszip";
    import { saveAs } from "file-saver";
    // 获取参数
    function getQueryString(variable, url = "") {
        var query = url.substring(1);
        var vars = query.split("&");
        for (var i = 0; i < vars.length; i++) {
            var pair = vars[i].split("=");
            if (pair[0] == variable) {
                return pair[1];
            }
        }
        return "";
    }

    export default {
        name: "design",
        components: {
            // SearchBox,
        },
        data() {
            return {
                imgKey: 0,
                listObjData: {},
                totalDownload: 0,
                totalView: 0,
                input3: "",
                select: '全部',
                style: {
                    width: "100%",
                    align: "center",
                },
                defaultMenu:  [
                    {
                        "name": "Banner"
                    },
                    {
                        "name": "插画"
                    },
                    {
                        "name": "三折页"
                    }
                ],
                menuList: [], // 分类菜单：Banner/插画/三折页
                visible: false,
                imgToDownload: {},
                dialogWidth: '',
                dialogHeight: '',
                windowWidth: document.documentElement.clientWidth, // 实时屏幕宽度
                windowHeight: document.documentElement.clientHeight // 实时屏幕高度
            };
        },
        async created() {
            await this.loadMenuFn()
            let url = decodeURIComponent(window.location.search);
            if (url !== "") {
                this.input3 = decodeURIComponent(getQueryString("sk", url)) || "";
                this.select = decodeURIComponent(getQueryString("folder", url)) || "";
                if (this.input3 || this.select) {
                    this.searchFnPre();
                }
            }else {
                this.submitFn();
            }

            // this.tongjiTotalFn();
            // this.typeListFn();
            // this.tongjiFn(1);
        },
        mounted() {
            // 实时获取浏览器宽度高度
            const that = this
            window.onresize = () => {
                return (() => {
                    window.fullHeight = document.documentElement.clientHeight
                    window.fullWidth = document.documentElement.clientWidth
                    that.windowHeight = window.fullHeight // 高
                    that.windowWidth = window.fullWidth // 宽
                })()
            }
        },
        methods: {
            changeType() {
                this.submitFn()
            },
            async loadMenuFn() {
                const res = await typeListDesign()
                if (res.code === 0) {
                    this.menuList = res.data
                } else {
                    this.menuList = this.defaultMenu
                }
            },
            submitFn() {
                let url = decodeURIComponent(window.location.search);
                console.log("url", url);
                if (this.select === '全部' || this.select === '') {
                    this.select = '全部'
                    history.pushState({}, "design", `?sk=${this.input3}&folder=${this.select}`);
                } else {
                    history.pushState({}, "design", `?sk=${this.input3}&folder=${this.select}`);
                }

                this.searchFnPre();
            },
            async searchFnPre() {
                this.listObjData = {}
                // 如果没有指定分类搜索，只展出每个分类下载量前5的
                if (this.select === '全部') {
                    for (let i = 0; i < this.menuList.length; i++) {
                        const obj = {
                            sk: this.input3,
                            folder: this.menuList[i].name,
                            order: '1'
                        }
                        let objList = await this.searchFn(obj)
                        this.listObjData[this.menuList[i].name] = objList
                        console.log(this.listObjData)
                    }
                } else {
                    //
                    const obj = {
                        sk: this.input3,
                        folder: this.select,
                        order: '0'
                    }
                    let objList = await this.searchFn(obj)
                    this.listObjData[this.select] = objList
                }
                const res1 = await getDownloadCountDesign(this.select)
                if (res1.code === 0) {
                    this.totalDownload = res1.data[0].download_counts;
                    this.totalView = res1.data[0].view_counts;
                } else {
                    this.totalDownload = 0;
                    this.totalView = 0;
                }
            },
            async searchFn(obj) {
                const res = await searchDesign(obj)
                console.log(res); //成功后返回的数据
                if (res.code === 0) {
                    return res.data;
                }
            },
            async recordData(folder, index, name, type) {
                const obj = {
                    name: name,
                    folder: folder,
                    type: type
                }
                const res = await recordDesign(obj)
                console.log(res)
                if (res.code === 0) {
                    const column = type === 2 ? 'download_count' : 'view_count'
                    this.listObjData[folder][index][column]++
                }
            },
            async download(img, key, index) {
                // var link = document.createElement('a');
                // link.href = '/svg/design/' + img.relative_path;
                // link.download = img.relative_path.split('\\').reverse()[0];
                // link.click();
                let _this = this;
                let zip = new JSZip();//初始化 JSZip
                let promises = []

                const promise1 = _this.getImgArrayBuffer('/svg/design/' + img.relative_path).then(data => {
                    zip.file(img.relative_path.split('\\').reverse()[0], data); 
                });
                promises.push(promise1);

                // psd或者ai
                let suffix = '.psd';
                const res = await _this.getImgArrayBufferStatus('/svg/design/' + img.folder + '/' + img.file_name + '.psd')
                if (res !== 200) {
                    const res1 = await _this.getImgArrayBufferStatus('/svg/design/' + img.folder + '/' + img.file_name + '.ai')
                    if (res1 !== 200) {
                        _this.$message.error('文件不存在');
                    } else {
                        suffix = '.ai';
                    }
                }
                const promise2 = _this.getImgArrayBuffer('/svg/design/' + img.folder + '/' + img.file_name + suffix).then(data => {
                    zip.file(img.file_name + suffix, data); 
                });
                promises.push(promise2);

                Promise.all(promises).then(() => {
                    zip.generateAsync({ type: "blob" }).then(content => {
                            console.log('正在压缩');
                            // 生成二进制流
                            saveAs(content, img.file_name + ".zip"); // 利用file-saver保存文件 自定义文件名
                            console.log('压缩完成');
                            _this.recordData(key, index, img.file_name, 2)
                            _this.totalDownload++
                        });
                        }).catch(res=>{
                            _this.$message.error('文件压缩失败');
                    });
            },
            getImgArrayBuffer(url){
                let _this=this;
                return new Promise((resolve, reject) => {
                    //通过请求获取文件blob格式
                    let xmlhttp = new XMLHttpRequest();
                    xmlhttp.open("GET", url, true);
                    xmlhttp.responseType = "blob";
                    xmlhttp.onload = function () {
                        if (this.status == 200) {
                            resolve(this.response);
                        }else{
                            reject(this.status);
                        }
                    }
                    xmlhttp.send();
                });
            },
            getImgArrayBufferStatus(url){
                let _this=this;
                return new Promise((resolve, reject) => {
                    //通过请求获取文件blob格式
                    let xmlhttp = new XMLHttpRequest();
                    xmlhttp.open("GET", url, true);
                    xmlhttp.responseType = "blob";
                    xmlhttp.onload = function () {
                        if (this.status == 200) {
                            resolve(200);
                        }else{
                            resolve(404);
                        }
                    }
                    xmlhttp.send();
                });
            },
            downloadInDialog() {
                this.download(this.imgToDownload, this.imgToDownload.folder, this.imgToDownload.index)
            },
            onLoad(e) {
                const img = e.target;
                if (img.fileSize > 0 || (img.width > 1 && img.height > 1)) {
                    // 图片长宽最大不超过浏览器的80%
                    const width_p = img.width / (this.windowWidth * 0.8);
                    const height_p = img.height / (this.windowHeight * 0.8);
                    const scale = Math.max(width_p, height_p);
                    if (scale > 1) {
                        this.dialogWidth = img.width / scale;
                        this.dialogHeight = img.height / scale;
                    } else {
                        this.dialogWidth = img.width;
                        this.dialogHeight = img.height;
                    }
                }
            },
            viewImg(img, key, index) {
                this.imgToDownload = img
                this.imgToDownload.index = index
                this.dialogWidth = ''
                this.dialogHeight = ''
                this.imgKey++
                this.visible = true
                this.recordData(key, index, img.file_name, 1)
                this.totalView++
            }
        },
    };
</script>

<style lang="scss">
    .class-choose {
        display: inline-block;
        font-size: 14px;
        .el-radio {
            margin-right: 0;
            background: #ffffff;
        }
        .el-radio__input {
            display: none;
        }
        .el-radio__label {
            font-size: 14px!important;
            padding-left: 5px;
        }
        .el-radio.is-bordered {
            border: 1px solid #C1C1C2;
        }
    }
    .search-box-design {
        display: inline-block;
        width: 354px;
        float: right;
        margin: 0;
        .el-input-group--append .el-input__wrapper{
            
            border-radius: 10px 0 0 10px ;
        }
        .el-input-group__append {
            // background-color: #5e99f3;
            border: 1px solid #007ae2;
            border-radius: 0 10px 10px 0;
            width: 84px;
            padding-left: 10px;
            padding-right: 0;
            /*height: 34px;*/
            background: #007ae2;

            color: #f5f5f5;
            .el-button {
                font-size: 14px;
                padding: 0 28px;
                .el-icon-search {
                    font-size: 14px;
                    vertical-align: middle;
                }
                span {
                    vertical-align: middle;
                }
            }
        }
        .el-select .el-input {
            width: 125px;
        }
        .input-with-select .el-input-group__prepend {
            background-color: #fff;
            border-radius: 10px 0 0 10px;
        }
        .el-input-group__prepend {
            border: 2px solid #c4c7ce;
            /*height: 34px;*/
            /*border-right: none;*/
            .el-select {
                &::after {
                    content: "";
                    width: 1px;
                    position: absolute;
                    right: 0;
                    top: 6px;
                    height: 25px;
                    background: #e5e7ea;
                    display: block;
                }
            }
        }

        .el-input__icon {
            line-height: 34px;
        }
        .el-input__inner {
            height: 34px;
            line-height: 34px;
            // border-left: 1px solid #c4c7ce;
            // border-right: none;
            // border-top: 1px solid #c4c7ce;
            // border-bottom: 1px solid #c4c7ce;
            border-radius: 10px;
        }
        .el-input.is-active .el-input__inner,
        .el-input__inner:focus {
            border-color: #c4c7ce;
        }
    }
    .logo {
        position: absolute;
        transform: translate(-50%);
        top: 220px;
        width: 245px;
        left: 50%;
    }

    .opacity {
        opacity: 0;
    }
    .list-page-design {
        margin-top: 60px;
        padding: 20px;
        padding-bottom: 50px;
        position: inherit;
        background: #f1f1f1;
        min-height: 740px;
        .el-dialog__header {
            padding: 0;
        }
        .el-dialog__headerbtn {
            background: url(../assets/img/close_button.png) no-repeat center center;
            background-size: cover;
            height: 24px;
            width: 24px;
            position: absolute;
            margin-top: -32px;
            margin-right: -32px;
            i {
                display: none;  // 在这里隐藏弹窗默认的关闭图标
            }
        }
        .close-button {
            display: inline-block;
            width: 15px;
            height: 13px;
            vertical-align: bottom;
            padding-right: 5px;
            background: url(../assets/img/close_button.png) no-repeat center center;
        }
        .el-dialog__body {
            padding: 0;
        }
        .el-dialog__footer {
            padding: 10px 20px 20px;
            text-align: right;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            position: relative;
            margin-top: -67px;
        }
        .el-button--primary {
            color: #FFF;
            background-color: #007AE2;
            border-color: #007AE2;
        }
        .download-white {
            display: inline-block;
            width: 15px;
            height: 13px;
            vertical-align: bottom;
            padding-right: 5px;
            background: url(../assets/img/icon_download_white.png) no-repeat center center;
        }
        .download-dialog-right {
            display: inline-block;
            float: right;
            margin: 0 10px;
            color: #EB6100;
            height: 33px;
            line-height: 33px;
        }
        .header {
            opacity: 1;
            position: fixed;
            top: 0;
            width: 100%;
            background: #fff;
            z-index: 99;
            box-shadow: 1px 0px 5px rgba($color: #000000, $alpha: 0.39);
        }
        .main-design {
            /*margin-top: 60px;*/
            padding: 20px;
            padding-bottom: 50px;
            .nums_text {
                text-align: left;
                font-size: 13px;
                height: 41px;
                line-height: 41px;
                color: #999;
                position: fixed;
                display: block;
                margin-bottom: 20px;
                z-index: 120;
                top: 62px;
                width: 95%;
                background: #f1f1f1;
                padding-top: 30px;
                padding-bottom: 20px;
            }
            .design-main{
                margin-top: 60px;
                z-index: 200;
                position: inherit;
                .design-divider {
                    margin: 0 0 15px 0;
                    font-weight: bold;
                    font-size: 14px;
                    display: block;
                }
                .el-image__inner {
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%,-50%);
                }
            }
            .el-divider {
                .el-divider__text {
                    border-bottom: 2px solid #007ae2;
                    top: -17px;
                    left: 0;
                    font-size: 18px;
                    padding: 0 8px 0 0;
                    line-height: 26px;
                    color: #007ae2;
                    &::before {
                        position: relative;
                        bottom: -6px;
                        width: 26px;
                        height: 26px;
                        margin-right: 4px;
                        display: inline-block;
                        content: "";
                        background: url(../assets/img/list-icon.svg) no-repeat bottom left;
                    }
                }
            }
            .design-list-box {
                display: flex;
                flex-wrap: wrap;
                justify-content: left;
                font-size: 12px;
                .skin-tips {
                    width: 100%;
                    text-align: left;
                    height: 32px;
                    background: #fafafa;
                    border-radius: 5px;
                    padding: 6px 0 0 10px;
                    font-size: 16px;
                    font-weight: 400;
                    color: #2c3e50;
                    line-height: 26px;
                    span {
                        padding-left: 4px;
                        display: inline-block;
                        vertical-align: middle;
                    }
                    i {
                        display: inline-block;
                        vertical-align: middle;
                        box-sizing: border-box;
                        width: 14px;
                        height: 15px;
                        border-radius: 2px;
                    }

                    .white {
                        // border: 1px solid #3398e2;
                        // background: #ffffff;
                        background: url(../assets/img/white.svg) no-repeat bottom left;
                    }
                    .black {
                        // background: #343536;
                        // border: 1px solid #252526;
                        background: url(../assets/img/black.svg) no-repeat bottom left;
                    }
                    // &::before {
                    //   position: relative;
                    //   bottom: -6px;
                    //   width: 26px;
                    //   height: 26px;
                    //   margin-right: 4px;
                    //   display: inline-block;
                    //   background: url(./assets/img/list-icon.svg) no-repeat bottom left;
                    // }
                }
                .item {
                    width: calc(20% - 22px);
                    margin: 0 20px 30px 0;
                    position: relative;
                    display: inline-block;
                    /*border-radius: 4px;*/
                    word-break: break-all;
                    border: 1px solid white;
                    box-shadow: 0px 0px 3px #909090;
                    background: #ffffff;
                    img {
                        width: 100%;
                        /*height: 32px;*/
                        /*max-width: 32px;*/
                        /*max-height: 32px;*/
                    }
                }
                .view-text {
                    float: right;
                    margin-right: 5px;
                    background: #7f7f7f;
                    padding: 2px 10px;
                    color: #ffffff;
                    border-radius: 10px;
                    opacity: 0.9;
                    position: relative;
                    margin-top: -24px;
                }
                .title-left {
                    display: inline-block;
                    float: left;
                    width: calc(100% - 100px);
                    height: 50px;
                    line-height: 50px;
                    font-size: 14px;
                    padding-left: 5px;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    overflow: hidden;
                }
                .title-right {
                    display: inline-block;
                    float: right;
                    width: 95px;
                    height: 50px;
                    line-height: 50px;
                    font-size: 13px;
                    text-align: right;
                    .inner-text {
                        margin-left: 5px;
                        color: #EB6100;
                    }
                    .download-text {
                        height: 50px;
                        line-height: 50px;
                        display: inline-block;
                        float: right;
                        padding-right: 10px;
                        padding-left: 5px;
                    }
                    .download-icon {
                        display: inline-block;
                        width: 15px;
                        height: 50px;
                        background: url(../assets/img/icon_download.png) no-repeat center center;
                    }
                }
                .title-right:hover {
                    cursor: pointer;
                    color: #026aed;
                }
                .title-right:hover .download-icon {
                    display: inline-block;
                    width: 15px;
                    height: 50px;
                    background: url(../assets/img/icon_download_hover.png) no-repeat center center;
                }
                .down {
                    position: absolute;
                    left: 0;
                    bottom: 0px;
                    display: none;
                    width: 100%;
                    box-sizing: border-box;
                    border-radius: 0 0 4px 4px;
                    background: rgba($color: #000000, $alpha: 0.618);
                    a {
                        display: inline-block;
                        padding: 4px;
                        color: #fff;
                        text-decoration: none;
                    }
                }
                .item:hover {
                    box-shadow: #666 2px 2px 5px;
                    .down {
                        display: inline-block;
                    }
                }
            }
        }
        .el-link {
            position: absolute;

            // animation: mymove 0.5s;
            transform: none;
            top: 0px;
            left: 10px;
            width: 130px;
        }
        .el-divider--horizontal {
            margin-top: 50px;
        }
        .logo {
            // animation: mymove 0.5s;
            transform: none;
            top: 25px;
            left: 10px;
            width: 130px;
        }
        .search-box {
            // animation: mymove2 0.6s;
            margin-top: 15px;
            /* float: left; */
        }
    }
    .animation {
        .el-link {
            animation: mymove 0.3s;

            position: absolute;
            transform: none;
            top: 0px;
            left: 10px;
            width: 130px;
        }
        .search-box {
            animation: mymove2 0.5s;
            margin-top: 15px;
        }

        // .logo {
        //   animation: mymove 0.3s;
        //   transform: none;
        //   top: 25px;
        //   left: 10px;
        //   width: 130px;
        // }
    }
    @keyframes mymove2 {
        from {
            margin-top: 305px;
        }
        to {
            margin-top: 15px;
        }
    }
    @keyframes mymove {
        from {
            transform: translate(-50%);
            top: 180px;
            width: 245px;
            left: 50%;
        }
        to {
            transform: none;
            top: 22px;
            left: 10px;
            width: 130px;
        }
    }
    // .list-page {
    //   .copy-right {
    //     position: absolute;
    //   }
    // }
    .svg-collect-design {
        position: fixed;
        bottom: 40px;
        // left: 50%;
        // transform: translate(-50%);
        width: 100%;
        height: 15px;
        text-align: center;
        font-size: 12px;
        color: #3C4042;
        padding: 5px 10px;
        background: #f1f1f1;

        .text {
            width: 97%;
            height: 14px;
            font-size: 14px;
            font-family: Microsoft YaHei, Microsoft YaHei-Regular;
            font-weight: 400;
            text-align: right;
            color: #3C4042;
            padding-bottom: 2px;
        }
    }
</style>

